<template>
  <div class="userFan" ref="userFan">
    <header>
      <div class="back">
        <van-icon name="arrow-left" size="22" color="black" @click="back" />
      </div>
      <div class="title">TA的粉丝</div>
      <div></div>
    </header>
    <div class="follows" v-if="userFans.length > 0">
      <MineFollowItem
        v-for="userFan in userFans"
        :key="userFan.userinfo.id"
        :followId="userFan.userinfo.id"
      />
    </div>
    <div class="none" v-else>
      {{ this.$route.query.userid == 13525021 ? "你" : "TA" }}还没有粉丝
    </div>
  </div>
</template>

<script>
import MineFollowItem from "@/components/MineFollowItem.vue";

export default {
  name: "UserFan",
  components: {
    MineFollowItem,
  },
  data() {
    return {
      userFans: [],
      page: 1,
      isAxios: false,
      isNoMore: false,
    };
  },
  created() {
    this.getData();
  },
  mounted() {
    this.$nextTick(() => {
      window.addEventListener("scroll", this.handleScroll);
    });
  },
  beforeDestroy() {
    // console.log("beforeDestroy");
    window.removeEventListener("scroll", this.handleScroll);
  },
  methods: {
    back() {
      window.history.go(-1);
    },
    handleScroll() {
      //   console.log(Math.ceil(window.scrollY), window.screen.height);
      //   console.log(this.$refs.userFollow.clientHeight);
      if (
        Math.ceil(window.scrollY) + window.screen.height ==
        this.$refs.userFan.clientHeight
      ) {
        if (!this.isNoMore) {
          if (!this.isAxios) {
            this.page++;
            this.getData();
            this.isAxios = true;
            this.$toast.loading({
              message: "加载中...",
              forbidClick: true,
            });
          }
        } else {
          this.$toast.fail("已没有更多");
        }
      }
    },
    getData() {
      this.$toast.loading({
        message: "加载中...",
        forbidClick: true,
        duration: 0,
      });
      this.$axios
        .get(
          `https://apis.netstart.cn/xpc/user/${this.$route.query.userid}/followers?page=${this.page}`
        )
        .then((res) => {
          // console.log(res.data.data);
          this.userFans = this.userFans.concat(res.data.data.list);
          this.isAxios = false;
          this.$toast.clear();
          console.log(res.data.data.next_page_url);
          if (!res.data.data.next_page_url) {
            this.isNoMore = true;
            this.$toast.fail("已没有更多数据");
          }
          this.$toast.clear();
        });
    },
  },
};
</script>

<style lang="scss" scoped>
.userFan {
  padding-top: 50px;

  header {
    background-color: white;
    border-bottom: 1px solid #f2f2f2;
    position: fixed;
    top: 0;
    left: 0;
    z-index: 10;
    height: 50px;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;

    > div {
      width: 33%;
    }

    .back {
      i {
        margin-left: 15px;
      }
    }

    .title {
      font-size: 20px;
      font-weight: bold;
      text-align: center;
    }
  }

  .none {
    font-size: 16px;
    color: #999;
    margin-top: 50px;
    text-align: center;
  }
}
</style>
